﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - HyperLink Cell Type</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 120px;
            text-align: right;
        }

        input[type="text"] {
            width: 100px;
        }

        input[type="button"] {
            width: 104px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;

        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var sheet = spread.getActiveSheet();
            sheet.bind(spreadNS.Events.SelectionChanged, function () {
                propertyChange(false);
            });
            sheet.isPaintSuspended(true);

            sheet.setColumnWidth(2, 150);
            sheet.setColumnWidth(1, 120);
            sheet.setRowHeight(1, 50);
            var h = new spreadNS.HyperLinkCellType();
            h.text("SpreadJS Overview");
            sheet.setCellType(1, 2, h, spreadNS.SheetArea.viewport);
            sheet.getCell(1, 2, spreadNS.SheetArea.viewport).value("http://spread.grapecity.com/Products/SpreadJS/").hAlign(spreadNS.HorizontalAlign.center);
            sheet.setValue(1, 1, "HyperLinkCellType");
            sheet.isPaintSuspended(false);

            $("#changeProperty").click(function () {
                propertyChange(true);
            });

            function propertyChange(isSet) {
                var sheet = spread.getActiveSheet();
                var sels = sheet.getSelections();
                if (sels && sels.length > 0) {
                    var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
                    var hyperLinkCellType = sheet.getCellType(sel.row, sel.col);
                    if (!(hyperLinkCellType instanceof spreadNS.HyperLinkCellType)) {
                        $("#changeProperty").attr("disabled", "disabled");
                        return;
                    }
                    if (!isSet) {
                        $("#changeProperty").removeAttr("disabled");
                        $("#txtHyperLinkCellLinkColor").val(hyperLinkCellType.linkColor());
                        $("#txtHyperLinkCellVisitedLinkColor").val(hyperLinkCellType.visitedLinkColor());
                        $("#txtHyperLinkCellText").val(hyperLinkCellType.text());
                        $("#txtHyperLinkCellToolTip").val(hyperLinkCellType.linkToolTip());
                    } else {
                        hyperLinkCellType.linkColor($("#txtHyperLinkCellLinkColor").val());
                        hyperLinkCellType.visitedLinkColor($("#txtHyperLinkCellVisitedLinkColor").val());
                        hyperLinkCellType.text($("#txtHyperLinkCellText").val());
                        hyperLinkCellType.linkToolTip($("#txtHyperLinkCellToolTip").val());
                    }
                }
                sheet.repaint();
            }

            function getActualRange(range, maxRowCount, maxColCount) {
                var row = range.row < 0 ? 0 : range.row;
                var col = range.col < 0 ? 0 : range.col;
                var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
                var colCount = range.colCount < 0 ? maxColCount : range.colCount;

                return new spreadNS.Range(row, col, rowCount, colCount);
            }
        }
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:330px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <label>linkColor:</label>
            <input type="text" id="txtHyperLinkCellLinkColor" />
            <label>visitedLinkColor:</label>
            <input type="text" id="txtHyperLinkCellVisitedLinkColor" />
        </div>
        <div class="option-row">
            <label>text:</label>
            <input type="text" id="txtHyperLinkCellText" />
            <label>linkToolTip:</label>
            <input type="text" id="txtHyperLinkCellToolTip" />
        </div>
        <div class="option-row">
            <label></label>
            <input type="button" id="changeProperty" value="Update"/>
        </div>
    </div>
</div>
</body>
</html>
